<template>
  <div id="wallet">
    <top-bar :title="title"></top-bar>
    <div class="wallet">
      <md-scroll-view ref="scrollView" :scrolling-x="false" @refreshing="$_onRefresh" :auto-reflow="true">
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <div class="meBalance">
          <p class="total_text">
            账户余额（元）
            <span @click="questionBtn">
              <img src="@/assets/imgs/qb_question@2x.png" />余额说明
            </span>
          </p>
          <div class="total_nuber">{{totalMoney}}</div>
        </div>
        <ul class="recharge">
          <li class="recharge_balance">
            <p>充值金额</p>
            <p class="recharge_text">{{userCharge}}元</p>
            <span></span>
          </li>
          <li class="send_banlance">
            <p>赠送金额</p>
            <p class="recharge_text">{{userBackMoney}}元</p>
          </li>
        </ul>
        <div class="details">账户明细</div>
        <ul class="details_list" v-show="account.length">
          <li v-for="(item,index) in account" :key="index">
            <div v-if="item.consumeType==0">
              <p class="type_name">账户充值</p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div v-else-if="item.consumeType==1">
              <p class="type_name">
                {{item.orderType}}
                <i>{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">-{{desJM(item.amtMoney)}}</p>
            </div>
            <div v-else-if="item.consumeType==2">
              <p class="type_name">
                退款
                <i>{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div v-else-if="item.consumeType==3">
              <p class="type_name">系统赠送</p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div v-else-if="item.consumeType==4">
              <p class="type_name">
                退款
                <i>{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">-{{desJM(item.amtMoney)}}</p>
            </div>
          </li>
          <p class="allAccount" @click="Allrecord">
            全部记录
            <md-icon name="yhq_next" slot="right" class="yhq_next"></md-icon>
          </p>
        </ul>
        <div class="no-details-list" v-if="!account.length">
          <p class="no_list_img">
            <img src="@/assets/imgs/zhmx_kb.png" />
          </p>
          <p class="no_list_text">暂没有账户明细哦~</p>
        </div>
      </md-scroll-view>
      <div class="rzBtn" @click="ifPwd">充值</div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/yhq_next.svg';
import { Tabs, Icon, Field, InputItem, Toast, Dialog, ScrollView, ScrollViewRefresh } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '我的钱包',
      userCharge: '',
      userBackMoney: '',
      totalMoney: '',
      account: []
    };
  },
  mounted() {
    this.getMyAccountTotal();
    this.getMyAccountDetail();
  },
  methods: {
    getMyAccountTotal() {
      Loading.show();
      http.post('recharge/getMyAccountTotal').then(res => {
        Loading.hide();
        if (!res) {
          return false;
        }
        if (res.data.code === '000000') {
          console.log(res.data);
          let param = res.data.data;
          this.userCharge = param.userCharge;
          this.userBackMoney = param.userBackMoney;
          this.totalMoney = param.userTotal;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getMyAccountDetail() {
      var param = {
        pageNo: 1,
        pageSize: 3
      };
      Loading.show();
      http.post('recharge/getMyAccountDetail', param).then(res => {
        Loading.hide();
        if (!res) {
          return false;
        }
        if (res.data.code === '000000') {
          console.log(res.data.data);
          this.account = res.data.data.rows;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    questionBtn() {
      this.$router.push({
        name: 'MyWalletquestion'
      });
    },
    Allrecord() {
      this.$router.push({
        name: 'MyWalletAllrecord'
      });
    },
    // 时间戳转化为时间
    timestampToTime(timestamp) {
      var date = new Date(timestamp); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      var h = date.getHours() + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    // des解密
    desJM(value) {
      return decryptByDESModeEBC(value);
    },
    // 字符串截取
    getRoute(text) {
      if (text.length > 15) {
        return text.substring(0, 15) + '...';
      } else {
        return text;
      }
    },
    $_onRefresh() {
      setTimeout(() => {
        this.getMyAccountTotal();
        this.getMyAccountDetail();
        this.$refs.scrollView.finishRefresh();
      }, 2000);
    },
    // 充值
    ifPwd() {
      Loading.show();
      http.post('/pakj/passenger/validatePayPwdFlag').then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          if (res.data.data.payPwd === 'false') {
            Dialog.confirm({
              title: '提示',
              content: '当前账户尚未设置支付密码，为保证资金安全，请设置支付密码',
              confirmText: '确认',
              onConfirm: () => {
                this.$router.push({
                  name: 'SetPayPwd'
                });
              }
            });
          } else {
            this.$router.push({
              name: 'MyWalletRecharge'
            });
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#wallet {
  height: 100vh;
  background-color: color-primary-background;
}

i {
  font-style: normal;
}

.wallet {
  margin-top: 20px;
}

.meBalance {
  height: 240px;
  background-color: #ff6917;
  color: #fff;
}

.total_text {
  padding-top: 32px;
  margin-left: 30px;
  font-size: 28px;
  color: #fff;
}

.total_text span {
  font-size: 24px;
  float: right;
  margin-right: 30px;
}

.total_text span img {
  width: 24px;
  height: 24px;
  position: relative;
  right: 5px;
  top: 2px;
}

.total_nuber {
  margin-top: 10px;
  margin-left: 30px;
  font-size: 90px;
  color: #fff;
}

.recharge {
  height: 120px;
  background-color: #fff;
  margin-top: 20px;
  padding-left: 30px;
}

.recharge li {
  float: left;
  width: 50%;
  padding-top: 20px;
  position: relative;
}

.recharge li p {
  font-size: 26px;
  color: #999;
}

.recharge li p.recharge_text {
  font-size: 32px;
  color: #333;
}

.recharge_balance span {
  display: inline-block;
  width: 1px;
  height: 100px;
  background-color: #E0E0E0;
  position: absolute;
  top: 10px;
  right: 0px;
}

.send_banlance p {
  padding-left: 30px;
}

.details {
  height: 80px;
  line-height: 80px;
  color: #999;
  padding-left: 30px;
  font-size: 26px;
  background-color: color-primary-background;
}

.details_list li {
  height: 110px;
  border-bottom: solid 1px #e0e0e0;
  padding: 0px 30px;
  position: relative;
  background-color: #fff;
}

.type_name {
  font-size: 28px;
  color: #333;
  padding-top: 20px;
}

.type_name i {
  margin-left: 5px;
}

.time {
  font-size: 24px;
  color: #666;
  margin-top: 10px;
}

.amtMoney {
  position: absolute;
  top: 45px;
  font-size: 28px;
  color: #333;
  right: 30px;
}

.allAccount {
  text-align: center;
  font-size: 26px;
  color: #999;
  margin-top: 20px;
  padding-bottom: 20px;
}

.yhq_next {
  position: relative;
  left: 8px;
  top: 1px;
  width: 18px;
  height: 20px;
}

.no-details-list {
  font-size: 28px;
  color: #666;
  background-color: #fff;
  padding: 100px 0px;
}

.no_list_img {
  text-align: center;
}

.no_list_img img {
  width: 200px;
  height: 156px;
}

.no_list_text {
  margin-top: 10px;
  text-align: center;
}

.rzBtn {
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
  background-color: #FF6917;
  color: #fff;
  border-radius: 7px;
  margin: 0px 3%;
  position: fixed;
  bottom: 20px;
  width: 94%;
}
</style>
